<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>getElementById+getElementsByName</title>
  </head>
  <body>
    <div id="div">
      M3: document.getElementById <br />
      div:first
    </div>
    <div id="div">
      M3: document.getElementById <br />
      div:second
    </div>

    <div name="div">
      M4: document.getElementByName
    </div>
    <script type='text/javascript'>
      // 当document下存在多个id为div的元素时，只获取第一个
      // ps: 尽量不要出现id相同的元素
      var oDiv = document.getElementById('div');

      // 打印结果:  M3: document.getElementById
      //          div:first
      console.log(oDiv.innerText);

      // 基本不使用getElementsByName的
      // 因为原则上name属性是给input、iframe等特定元素使用的
      // 在IE8以下的版本是只能选取到input、iframe这类特定元素
      // getElementsByName返回的元素集合为NodeList
      oDiv = document.getElementsByName('div');
      // 打印结果: M4: document.getElementByName
      console.log(oDiv[0].innerText);
    </script>
  </body>
</html>
